<template>
  <page-container>
    <a-row :span="24" style="background: #141414">
      <a-col :span="24" v-for="item in navData" :key="item.code" style="display: flex">
        <a-col :span="5">
          <a-card
            size="small"
            style="width: 100%; height: 100%; padding-top: 10px; align-items: center"
          >
            <div
              style="
                display: flex;
                margin-bottom: 10px;
                align-items: center;
                flex-wrap: wrap;
                width: 100%;
              "
            >
              <div
                class="typeKey"
                style="
                  margin-left: 10px;
                  width: 100%;
                  text-align: left;
                  color: #e99220;
                  font-size: 14px;
                  font-family: Source Han Sans CN;
                  font-weight: bold;
                "
              >
                <a-select
                  default-value="lucy"
                  :dropdownStyle="dropdownStyle"
                  :dropdownMatchSelectWidth="false"
                  style="width: 60px; margin-right: 10px"
                >
                  <a-select-option value="lucy">
                    <img src="@/assets/image/tags/ai.svg" style="width: 17px; height: 17px" />
                  </a-select-option>
                  <a-select-option value="jack">
                    <span
                      class="iconfont icon-AIjiarengongbiaoqian"
                      style="width: 17px; height: 17px; color: #e99220"
                    ></span>
                    <span
                      style="
                        width: 8px;
                        height: 20px;
                        font-size: 14px;
                        font-family: Source Han Sans CN;
                        font-weight: 400;
                        line-height: 20px;
                        color: #ffffff;
                        opacity: 1;
                      "
                    >
                      +
                    </span>
                    <img src="@/assets/man.svg" alt="" style="width: 17px; height: 17px" />
                  </a-select-option>
                </a-select>
                <img src="@/assets/image/tags/ai.svg" style="width: 17px; height: 17px" />
                {{ item.name }}:
              </div>
            </div>
          </a-card>
        </a-col>
        <a-col :span="19">
          <a-card
            size="small"
            style="height: 100%; padding-bottom: -10px; display: flex; align-items: center"
            class="car"
          >
            <div
              style="
                width: 100%;
                display: flex;
                flex-flow: wrap;
                margin-bottom: -10px;
                margin: 11px 0 0 11px;
              "
            >
              <a
                href="javascript:;"
                v-for="el in item.children"
                :value="el.code"
                :key="el.code"
                class="actoveBoder"
                :class="el.code == checkedTag ? 'active' : 'activeEl'"
                @click="handleTag(el, item)"
                style="
                  padding: 4px 12px;
                  border: 1px solid #845c27;
                  margin-right: 4px;
                  margin-bottom: 10px;
                  font-size: 14px;
                  font-family: Source Han Sans CN;
                  font-weight: 400;
                  position: relative;
                  color: #ffffff;
                "
              >
                {{ el.name }}
              </a>
            </div>
          </a-card>
        </a-col>
      </a-col>
    </a-row>
    <supper-select
      ref="select"
      @change="supperSelectChange"
      :options="supperSelectOptions"
    ></supper-select>
    <a-card style="margin-top: 8px">
      <div style="display: flex; justify-content: space-between; margin-bottom: 20px">
        <div>
          <a-range-picker
            @change="onChange"
            @ok="handleOk"
            :value="date"
            show-time
            format="YYYY-MM-DD HH:mm:ss"
          />
        </div>
      </div>
      <list
        portionUrl="/aitype/caseInfo/queryCaseInfo"
        :params="queryForm"
        @change="handleList"
        :buttonList="buttonList"
      />
      <!-- <drawer ref="RefChilde" /> -->
      <drawerList
        v-model:visible="visible"
        title="Ai质态监测"
        portionUrl="/aitype/caseInfo/queryCaseInfo"
        :params="params"
      />
    </a-card>
  </page-container>
</template>
<script lang="ts">
import { defineComponent, reactive, ref, onMounted, createVNode } from 'vue';
import SupperSelect from '@/components/supper-select/index.vue';
import { getParamsCodes, getParamsNames } from '@/components/supper-select/index.js';
import { useRouter } from 'vue-router';
import { Modal } from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import list from '@/components/police-list/index.vue';
import drawerList from '@/components/police-list-drawer/index.vue';
import { exportExcel, labelTree } from '@/api/intelligentanalysis/alert';
import { downloadExcel } from '@/utils/download';
//查询条件
interface queryForm {
  callTimeStart: any;
  callTimeEnd: any;
  inputParams?: any; //列表搜索内容
  callSummaryCodes?: any; //接警类别
  dealSummaryCodes?: any; //反馈类别
  xqdwCodes?: any; //辖区单位
  classifyCodes?: any;
  page: any;
  size: any;
  caseNos?: any;
  searchType: any; //传统和智能的切换
  labelCodes?: any; //导航栏
}
interface ButtonItem {
  type: string;
  name: string;
  background?: string;
  icon?: string;
  clickHandle: () => any;
}
export default defineComponent({
  name: 'label',
  components: {
    SupperSelect,
    list,
    drawerList,
  },
  setup() {
    const supperSelectOptions = [
      {
        type: 'ai',
        visible: false, // 隐藏
      },
    ];
    const router = useRouter();
    const date = ref<any>([]);
    //查询字段
    let queryForm: queryForm = reactive({
      callTimeStart: '',
      callTimeEnd: '',
      page: 1,
      size: 50,
      searchType: '0',
      classifyCodes: '',
    });
    //日期
    const onChange = (a, b) => {
      date.value = b;
    };
    const handleOk = () => {
      queryForm.callTimeStart = date.value[0];
      queryForm.callTimeEnd = date.value[1];
    };
    const caseNos = ref<any>([]);
    const handleList = value => {
      caseNos.value = value.toString();
    };

    //点击搜索图标
    const handleSearch = value => {
      queryForm.inputParams = value;
    };
    const supperSelectChange = data => {
      //   getParamsNames(data);
      const { jq, fk, xqdw } = getParamsCodes(data);
      queryForm.callSummaryCodes = jq;
      queryForm.dealSummaryCodes = fk;
      queryForm.xqdwCodes = xqdw;
    };

    //nav
    const navData = ref<any>([]);
    //导航栏
    const handlelabelTree = () => {
      let obj = {
        classifyCode: queryForm.classifyCodes,
      };
      labelTree(obj).then(res => {
        navData.value = res.RESULT;
      });
    };
    const checkedTag = ref<string>();
    // tag点击事件
    const handleTag = (el, item) => {
      if (el.code == checkedTag.value) {
        queryForm.labelCodes = '';
        checkedTag.value = '';
      } else {
        checkedTag.value = el.code;
        queryForm.labelCodes = el.code;
      }
    };
    //打开AI质态监测
    const visible = ref<boolean>(false);
    const params = ref<any>({});
    //导出
    const handleExlex = () => {
      if (caseNos.value.length) {
        let obj = Object.assign({ caseNos: caseNos.value }, queryForm);
        exportExcel(obj).then(res => {
          downloadExcel(res, '警情列表');
        });
      } else {
        Modal.confirm({
          title: '提示',
          icon: createVNode(ExclamationCircleOutlined),
          content: '是否导出全部数据？',
          okText: '确认',
          cancelText: '取消',
          onOk() {
            let obj = queryForm;
            obj.page = '';
            obj.size = '';
            exportExcel(obj).then(res => {
              downloadExcel(res, '警情列表');
            });
          },
        });
      }
      return;
    };
    const routerQuery = router.currentRoute.value.query;
    queryForm.inputParams = routerQuery.inputParams;
    queryForm.callSummaryCodes = routerQuery.callSummaryCodes;
    queryForm.dealSummaryCodes = routerQuery.dealSummaryCodes;
    queryForm.xqdwCodes = routerQuery.xqdwCodes;
    queryForm.classifyCodes = routerQuery.classifyCodes;
    queryForm.searchType = routerQuery.searchType;
    queryForm.callTimeStart = routerQuery.callTimeStart;
    queryForm.callTimeEnd = routerQuery.callTimeEnd;

    date.value[0] = routerQuery.callTimeStart;
    date.value[1] = routerQuery.callTimeEnd;
    onMounted(() => {
      handlelabelTree();
    });
    const buttonList = ref<Array<ButtonItem>>([
      {
        name: '导出',
        type: '',
        clickHandle: handleExlex,
      },
    ]);
    return {
      buttonList,
      supperSelectOptions,
      params,
      visible,
      handlelabelTree,
      handleExlex,
      handleList,
      onChange,
      handleOk,
      handleTag,
      checkedTag,
      supperSelectChange,
      handleSearch,
      date,
      queryForm,
      navData,
      caseNos,
    };
  },
});
</script>
<style lang="less" scoped>
.typeKey {
  color: #333;
  color: #88a7d7;
  font-size: 14px;
  text-align: left;
  vertical-align: top;
}
:deep(.ant-select-selection-item) {
  text-align: center;
}
:deep(.ant-select-item-option-content) {
  text-align: center;
}
:deep(.ant-radio-button-wrapper) {
  height: 30px;
}
.active {
  background: #c27818;
}
:deep(.ant-radio-button-wrapper:hover) {
  color: #3674f6;
}
:deep(.ant-radio-group-solid
    .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled)) {
  color: #c8fffd;
  background: #3674f6;
}
:deep(.ant-radio-button-wrapper) {
  color: #b9c4dd;
}
:deep(.ant-radio-button-wrapper:not(:first-child)::before) {
  display: none;
}

:deep(.ant-card-small > .ant-card-body) {
  padding: 0px;
}
.icon-AIjiarengongbiaoqian:before {
  content: '\e6c8';
}
.activeEl {
  background: #261601;
}
.actoveBoder {
  &::before {
    position: absolute;
    top: -4px;
    left: -4px;
    z-index: 55;
    display: block;
    width: 8px;
    height: 8px;
    background: #2b2d33;
    border-right: 1px solid #845c27;
    transform: rotate(45deg);
    content: '';
  }
}
</style>
